/*
  学习目标: 新增
*/

import React from 'react';
import { CommentList } from './components/CommentList';
import { Header } from './components/Header';

import './index.css';

export default class App extends React.Component {
  state = {
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  handleDelById = (id) => {
    const { list } = this.state;
    this.setState({
      list: list.filter((item) => item.id !== id),
    });
  };

  // 2.1. App定义删除方法
  handelAdd = (newItem) => {
    const { list } = this.state;
    // 2.4
    this.setState({ list: [newItem, ...list] });
  };

  render() {
    const { list } = this.state;
    return (
      <div className="app">
        <Header
          // 2.2. 子传父, 父传回调函数
          handleAdd={this.handelAdd}
        ></Header>
        <CommentList handleDelById={this.handleDelById} list={list}></CommentList>
      </div>
    );
  }
}
